.aside {
  width: 20rem;
  margin-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: var(--bg-body);
  color: inherit;

  .sticky {
    position: sticky;
    top: 1rem;
    margin-bottom: 1rem;

    .articlelist,
    .articlecategory,
    .articletags {
      border-radius: 4px;
      margin-bottom: 1.3rem;
      background-color: var(--bg-second);
      box-shadow: var(--box-shadow);
      line-height: 1.29;

      ul {
        padding: 1rem;

        li {
          cursor: pointer;
        }
      }

      .icontitle {
        padding: 1rem;
        border-bottom: 1px solid rgba(178, 186, 194, .15);
        color: var(--main-text-color);
        font-weight: bold;

        span {
          margin-left: .5rem;
        }
      }
    }
  }

  .icontitle {
    padding: 1rem;
    border-bottom: 1px solid rgba(178, 186, 194, .15);
    color: var(--main-text-color);
    font-weight: bold;

    span {
      margin-left: .5rem;
    }

  }

  .articlelist {
    ul {
      padding: 0 1rem 1rem;

      li {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        padding-top: 1rem;
        color: var(--second-text-color);
      }

      li:hover {
        color: rgb(255, 0, 100);
      }
    }
  }

  .articlecategory {
    ul {
      li {
        padding: 8px 7px;
        border-radius: 4px;
        color: var(--second-text-color);
        line-height: 1.5em;
        transition: all ease-in-out .2s;
        display: flex;
        justify-content: space-between;
      }

      li:hover {
        color: rgb(255, 0, 100);
      }
    }
  }

  .articletags {
    ul {
      li {
        display: inline-block;
        padding: 2px 7px;
        border: 1px solid rgba(178, 186, 194, .15);
        border-radius: 4px;
        margin: 0 7px 7px 0;
        color: var(--second-text-color);
        line-height: 1.5em;
        transition: all ease-in-out .2s;
      }

      li:hover {
        color: rgb(255, 0, 100);
        border: 1px solid rgb(255, 0, 100);
      }
    }
  }


}
